<template>
  <div style="padding: 0 50px">
    <div class="back-box">
      <el-button type="primary" @click="goBack(0)">返回</el-button>
    </div>
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="200"
    >
      <ContentWrap>
        <div class="title-box">
          <span class="title">一、基本信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="关联公告" prop="announcementId">
              <el-select
                clearable
                style="width: 100%"
                v-model="formData.announcementId"
                placeholder="请选择关联公告"
                @change="announcementIdChange"
              >
                <el-option
                  v-for="item in eventNameList"
                  :key="item.id"
                  :label="item.eventName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告编号">
              <el-input :disabled="true" v-model="formData.announcementCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="场次名称" prop="sessionName">
              <el-input
                :maxlength="20"
                v-model="formData.sessionName"
                placeholder="请输入场次名称"
                @blur="formData.sessionName && getNumCode('session')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场次编号">
              <el-input :disabled="true" v-model="formData.sessionCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易总量(吨)" prop="tradingGrossAmount">
              <el-input
                :maxlength="10"
                v-model="formData.tradingGrossAmount"
                placeholder="请输入交易总量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金(元)" prop="securityDeposit">
              <el-input
                :maxlength="10"
                v-model="formData.securityDeposit"
                placeholder="请输入保证金"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交货周期" prop="deliveryCycle">
              <el-date-picker
                v-model="formData.deliveryCycle"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                type="datetimerange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货地" prop="deliveryPlace">
              <el-input
                :maxlength="50"
                v-model="formData.deliveryPlace"
                placeholder="请输入交货地"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易日期" prop="deliveryDate">
              <el-date-picker
                clearable
                style="width: 100%"
                v-model="formData.deliveryDate"
                placeholder="请选择"
                type="date"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易时间" prop="deliveryTime">
              <el-time-picker
                v-model="formData.deliveryTime"
                is-range
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="倒计时(秒)" prop="countdown">
              <el-input
                :maxlength="10"
                :disabled="true"
                v-model="formData.countdown"
                placeholder="请输入倒计时"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公示时间" prop="publicityTime">
              <el-date-picker
                clearable
                v-model="formData.publicityTime"
                placeholder="请选择公示时间"
                type="datetime"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易方式" prop="tradingWay">
              <el-select
                clearable
                style="width: 100%"
                v-model="formData.tradingWay"
                placeholder="请选择交易方式"
              >
                <el-option
                  v-for="item in getIntDictOptions(DICT_TYPE.BID_TRADING_WAY)"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </ContentWrap>
      <ContentWrap>
        <div class="title-box">
          <span class="title">二、标段信息</span>
          <div class="flex-box-time">
            竞拍间隔时间：<el-input-number
              v-model="auctionInterval"
              :min="1"
              :max="60"
              :maxlength="2"
              :precision="0"
              :controls="false"
              @blur="auctionIntervalChange"
            />
            &nbsp;分
          </div>
          <div class="flex-box-time">
            标段间隔时间：<el-input-number
              v-model="sectionInterval"
              :min="1"
              :max="60"
              :maxlength="2"
              :precision="0"
              :controls="false"
              @blur="sectionIntervalChange"
            />
            &nbsp;分
          </div>
          <span>
            <el-button type="primary" @click="addRow()" style="margin-right: 10px"
              >新增一行</el-button
            >
            <el-button
              :disabled="formData?.sectionMessageCreateReqVOList?.length < 2"
              type="primary"
              @click="deleteRow()"
              >删除一行</el-button
            >
          </span>
        </div>
        <el-table
          border
          stripe
          :data="formData.sectionMessageCreateReqVOList || []"
          :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
        >
          <el-table-column label="标段号" align="center" prop="markCode" width="200" />
          <el-table-column label="竞拍时间（开始）" align="center" width="250">
            <template #default="{ row, $index }">
              <el-form-item
                :prop="`sectionMessageCreateReqVOList.${$index}.startTime`"
                :rules="formRules.startTime"
                class="no-label"
              >
                <span v-if="!row.isEdit">{{ row.startTime }}</span>
                <el-date-picker
                  v-if="row.isEdit"
                  clearable
                  v-model="row.startTime"
                  placeholder="请选择开始时间"
                  type="datetime"
                  @change="startTimeChange"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="竞拍时间（结束）" align="center" width="250">
            <template #default="{ row, $index }">
              <el-form-item
                :prop="`sectionMessageCreateReqVOList.${$index}.endTime`"
                :rules="formRules.endTime"
                class="no-label"
              >
                <span v-if="!row.isEdit">{{ row.endTime }}</span>
                <el-date-picker
                  v-if="row.isEdit"
                  clearable
                  v-model="row.endTime"
                  placeholder="请选择结束时间"
                  type="datetime"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center" width="180">
            <template #default="{ row, $index }">
              <el-form-item
                label=""
                :prop="`sectionMessageCreateReqVOList.${$index}.coalId`"
                :rules="formRules.coalId"
                class="no-label"
              >
                <span v-if="!row.isEdit">{{ row.coalId }}</span>
                <el-select
                  style="width: 100%"
                  v-if="row.isEdit"
                  v-model="row.coalId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in coalTypeList"
                    :key="item.id"
                    :label="item.coalName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="交易量(吨)" align="center" width="180">
            <template #default="{ row, $index }">
              <el-form-item
                label=""
                :prop="`sectionMessageCreateReqVOList.${$index}.tradingAmount`"
                :rules="formRules.tradingAmount"
                class="no-label"
              >
                <span v-if="!row.isEdit">{{ row.tradingAmount }}</span>
                <el-input
                  v-if="row.isEdit"
                  :maxlength="50"
                  v-model="row.tradingAmount"
                  placeholder="请输入"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            :label="`${formData.tradingWay === 3 ? '挂牌' : '起拍'}价格（元/吨）`"
            align="center"
            width="180"
          >
            <template #default="{ row, $index }">
              <el-form-item
                label=""
                :prop="`sectionMessageCreateReqVOList.${$index}.startingPrice`"
                :rules="formRules.startingPrice"
                class="no-label"
              >
                <span v-if="!row.isEdit">{{ row.startingPrice }}</span>
                <el-input
                  v-if="row.isEdit"
                  :maxlength="20"
                  v-model="row.startingPrice"
                  placeholder="请输入"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="基本指标" width="300">
            <template #default="{ row }">
              <el-row class="base">
                <el-form-item label="发热量">
                  <span v-if="!row.isEdit">{{ row.calorificValue }}</span>
                  <el-input
                    v-if="row.isEdit"
                    :maxlength="20"
                    v-model="row.calorificValue"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-row>
              <el-row class="base">
                <el-form-item label="灰分（Ad%）">
                  <span v-if="!row.isEdit">{{ row.ashContent }}</span>
                  <el-input
                    v-if="row.isEdit"
                    :maxlength="20"
                    v-model="row.ashContent"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-row>
              <el-row class="base">
                <el-form-item label="硫分（St,d%）">
                  <span v-if="!row.isEdit">{{ row.sulfurContent }}</span>
                  <el-input
                    v-if="row.isEdit"
                    :maxlength="20"
                    v-model="row.sulfurContent"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-row>
              <el-row class="base">
                <el-form-item label="水分（Mt%）">
                  <span v-if="!row.isEdit">{{ row.hydration }}</span>
                  <el-input
                    v-if="row.isEdit"
                    :maxlength="20"
                    v-model="row.hydration"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-row>
              <el-row class="base">
                <el-form-item label="挥发分（Vdaf%）">
                  <span v-if="!row.isEdit">{{ row.volatileMatter }}</span>
                  <el-input
                    v-if="row.isEdit"
                    :maxlength="20"
                    v-model="row.volatileMatter"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </ContentWrap>
      <ContentWrap>
        <div class="title-box">
          <span class="title">三、附加说明</span>
        </div>
        <Editor v-model="formData.remark" height="300px" />
      </ContentWrap>
      <ContentWrap>
        <div class="title-box">
          <span class="title">四、指定客户</span>
        </div>
        <div class="spec-user">
          <span>指定客户</span>
          <el-select
            multiple
            clearable
            v-model="formData.appointClient"
            placeholder="请选择指定客户"
            class="!w-500px"
          >
            <el-option
              v-for="item in clientList"
              :key="item.id"
              :label="item.companyName"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="text-red-500 mt-20px">* 不选择默认通知全部客户</div>
      </ContentWrap>
    </el-form>
    <div class="footer">
      <el-button type="primary" :disabled="formLoading" @click="handleSave"> 保存 </el-button>
      <el-button @click="resetFn"> 重置 </el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash-es'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { validateTransAmount } from '@/utils/validatorUtil'
import * as bidding from '@/api/bidding'
const formRef = ref()
const { t } = useI18n()
const message = useMessage()
const formLoading = ref(false)
const auctionInterval: Record<string, any> = ref(1)
const sectionInterval: Record<string, any> = ref(1)
const ONEMINSTAMP = 60 * 1000
const emit = defineEmits(['subPage'])
const coalTypeList: Record<string, any> = ref([])
const clientList: Record<string, any> = ref([])
const eventNameList: Record<string, any> = ref([])
const rowData: Record<string, any> = ref({ markCode: '', isEdit: true })

const checkDeliveryTime = (rule, date, callback) => {
  if (!date?.length) {
    return callback(new Error('交易时间不能为空'))
  }
  if (!date[0]) {
    return callback(new Error('开始时间不能为空'))
  }
  if (!date[1]) {
    return callback(new Error('结束时间不能为空'))
  }
  callback()
}

const checkStartTime = (rule, value, callback) => {
  if (!formData.value.deliveryDate || formData.value.deliveryTime?.length !== 2) {
    return callback(new Error('请先选择交易日期和交易时间'))
  }
  const { startTime, endTime } = getTimeStamp()
  const curTime = new Date(value).getTime() || 0
  if (curTime < startTime || curTime > endTime) {
    return callback(new Error('开始时间必须在交易时间范围内'))
  }
  if (!isRangeForValue(rule, curTime)) {
    return callback(new Error('标段之间时间范围必须大于1秒'))
  }
  if (isStartLessThanEnd(rule)) {
    return callback(new Error('开始时间必须小于结束时间'))
  }
  callback()
}

const checkEndTime = (rule, value, callback) => {
  if (!formData.value.deliveryDate || formData.value.deliveryTime?.length !== 2) {
    return callback(new Error('请先选择交易日期和交易时间'))
  }
  const { startTime, endTime } = getTimeStamp()
  const curTime = new Date(value).getTime() || 0
  if (curTime < startTime || curTime > endTime) {
    return callback(new Error('结束时间必须在交易时间范围内'))
  }
  if (!isRangeForValue(rule, curTime)) {
    return callback(new Error('标段之间时间范围必须大于1秒'))
  }
  if (isStartLessThanEnd(rule)) {
    return callback(new Error('开始时间必须小于结束时间'))
  }
  callback()
}

const startTimeChange = (value) => {
  if (
    formData.value.sectionMessageCreateReqVOList.length === 1 &&
    !formData.value.sectionMessageCreateReqVOList[0]?.endTime
  ) {
    formData.value.sectionMessageCreateReqVOList[0].endTime = new Date(
      value.getTime() + auctionInterval.value * ONEMINSTAMP
    )
  }
}

const isStartLessThanEnd = (rule) => {
  const index = Number(rule.field.split('.')[1])
  const list = formData.value.sectionMessageCreateReqVOList || []
  const data = list.find((e, v) => v === index)
  const startTimeTimeStamp = data?.startTime?.getTime() || 0
  const endTimeTimeStamp = data?.endTime?.getTime() || 0
  if (startTimeTimeStamp && endTimeTimeStamp) {
    return startTimeTimeStamp >= endTimeTimeStamp
  }
  return false
}

const getTimeStamp = () => {
  const dateStr = formatDate(formData.value.deliveryDate).split(' ')[0]
  const startStr = formatDate(formData.value.deliveryTime[0]).split(' ')[1]
  const endStr = formatDate(formData.value.deliveryTime[1]).split(' ')[1]
  const startTime = new Date(`${dateStr} ${startStr}`).getTime() || 0
  const endTime = new Date(`${dateStr} ${endStr}`).getTime() || 0
  return {
    startTime,
    endTime
  }
}

const isRangeForValue = (rule, curTime) => {
  const index = Number(rule.field.split('.')[1])
  const list = formData.value.sectionMessageCreateReqVOList || []
  const timeList = list
    .filter((e, v) => v !== index)
    .map((m) => {
      return {
        startTime: m.startTime ? m.startTime.getTime() : null,
        endTime: m.endTime ? m.endTime.getTime() : null
      }
    })
  const isVaild = timeList.every((e) => {
    if (e.startTime && e.endTime) {
      if (e.startTime <= curTime && e.endTime + 1000 >= curTime) {
        return false
      }
      return true
    }
    return true
  })
  return isVaild
}

const formData: Record<string, any> = ref({
  announcementId: undefined,
  announcementCode: undefined,
  sessionName: undefined,
  sessionCode: undefined,
  tradingGrossAmount: undefined,
  securityDeposit: undefined,
  deliveryCycle: [],
  deliveryPlace: undefined,
  deliveryDate: undefined,
  deliveryTime: [],
  countdown: 60,
  publicityTime: undefined,
  tradingWay: undefined,
  sectionMessageCreateReqVOList: [],
  remark: undefined,
  appointClient: []
})

const formRules = reactive({
  announcementId: [{ required: true, message: '专场名称不能为空', trigger: 'change' }],
  sessionName: [{ required: true, message: '场次名称不能为空', trigger: 'blur' }],
  tradingGrossAmount: [
    { required: true, message: '交易总量不能为空', trigger: 'blur' },
    { validator: validateTransAmount, trigger: 'blur' }
  ],
  securityDeposit: [
    { required: true, message: '保证金不能为空', trigger: 'blur' },
    { validator: validateTransAmount, trigger: 'blur' }
  ],
  deliveryCycle: [{ required: true, message: '交货周期不能为空', trigger: 'change' }],
  deliveryPlace: [{ required: true, message: '交货地不能为空', trigger: 'blur' }],
  deliveryDate: [{ required: true, message: '交易日期不能为空', trigger: 'blur' }],
  deliveryTime: [
    { required: true, message: '交易时间不能为空', trigger: 'change' },
    { validator: checkDeliveryTime, trigger: 'change' }
  ],
  countdown: [
    { required: true, message: '倒计时不能为空', trigger: 'blur' },
    { pattern: /^[1-9]\d*$/, message: '倒计只能是数字', trigger: 'blur' }
  ],
  publicityTime: [{ required: true, message: '公示时间不能为空', trigger: 'blur' }],
  tradingWay: [{ required: true, message: '交易方式不能为空', trigger: 'change' }],
  startTime: [
    { required: true, message: '开始时间不能为空', trigger: 'change' },
    { validator: checkStartTime, trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '结束时间不能为空', trigger: 'change' },
    { validator: checkEndTime, trigger: 'change' }
  ],
  coalId: [{ required: true, message: '产品名称不能为空', trigger: 'change' }],
  tradingAmount: [
    { required: true, message: '交易量不能为空', trigger: 'blur' },
    { validator: validateTransAmount, trigger: 'blur' }
  ],
  startingPrice: [
    {
      required: true,
      message: '价格不能为空',
      trigger: 'blur'
    },
    { validator: validateTransAmount, trigger: 'blur' }
  ],
  calorificValue: [{ required: true, message: '发热量不能为空', trigger: 'blur' }],
  ashContent: [{ required: true, message: '灰分不能为空', trigger: 'blur' }],
  sulfurContent: [{ required: true, message: '硫分不能为空', trigger: 'blur' }],
  hydration: [{ required: true, message: '水分不能为空', trigger: 'blur' }],
  volatileMatter: [{ required: true, message: '挥发分不能为空', trigger: 'blur' }]
})

const goBack = (index: number) => {
  emit('subPage', index)
}

const auctionIntervalChange = () => {
  if (!auctionInterval.value || auctionInterval.value === 'e') {
    auctionInterval.value = 1
  }
}

const sectionIntervalChange = () => {
  if (!sectionInterval.value || sectionInterval.value === 'e') {
    sectionInterval.value = 1
  }
}

const announcementIdChange = (id) => {
  if (!id) return
  const { eventCode } = getAnnouncement(id)
  formData.value.announcementCode = eventCode
}

const getNumCode = async (ruleType) => {
  const res = await bidding.getNumCode({ ruleType })
  if (ruleType === 'session') {
    formData.value.sessionCode = res
  }
  if (ruleType === 'section') {
    const list = formData.value.sectionMessageCreateReqVOList
    const endTime = list[list.length - 1]?.endTime
    if (list.length && endTime) {
      const endTimeStamp = endTime.getTime()
      rowData.value = {
        markCode: res,
        isEdit: true,
        startTime: new Date(endTimeStamp + sectionInterval.value * ONEMINSTAMP),
        endTime: new Date(
          endTimeStamp + sectionInterval.value * ONEMINSTAMP + auctionInterval.value * ONEMINSTAMP
        )
      }
    } else {
      rowData.value = {
        markCode: res,
        isEdit: true
      }
    }
  }
}

const addRow = async () => {
  if (formData.value.deliveryDate && formData.value.deliveryTime.length === 2) {
    const list = formData.value.sectionMessageCreateReqVOList
    const endTime = list[list.length - 1]?.endTime
    const deliveryStartTime = new Date(
      `${formatDate(formData.value.deliveryDate, 'YYYY-MM-DD')} ${formatDate(
        formData.value.deliveryTime[0],
        'HH:mm:ss'
      )}`
    )?.getTime()
    const deliveryEndTime = new Date(
      `${formatDate(formData.value.deliveryDate, 'YYYY-MM-DD')} ${formatDate(
        formData.value.deliveryTime[1],
        'HH:mm:ss'
      )}`
    )?.getTime()
    if (list.length && endTime) {
      const endTimeStamp = endTime.getTime()
      const lastEndTime =
        endTimeStamp + sectionInterval.value * ONEMINSTAMP + auctionInterval.value * ONEMINSTAMP
      if (deliveryStartTime > lastEndTime || lastEndTime > deliveryEndTime) {
        message.warning('标段时间不能超出场次时间范围')
        return
      }
    }
  }
  await getNumCode('section')
  formData.value.sectionMessageCreateReqVOList.push(rowData.value)
}

const deleteRow = () => {
  const lastIndex = formData.value.sectionMessageCreateReqVOList.length - 1
  if (lastIndex !== 0) {
    if (formData.value.sectionMessageCreateReqVOList[lastIndex].isEdit) {
      formData.value.sectionMessageCreateReqVOList.splice(lastIndex, 1)
    }
  }
}

const handleSave = async () => {
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  createSession()
}

const createSession = async () => {
  try {
    formLoading.value = true
    const data = getCreateSessionBody()
    await bidding.createSession(data)
    message.success(t('common.createSuccess'))
    goBack(0)
  } finally {
    formLoading.value = false
  }
}

const bidCoalManageList = async () => {
  const res = await bidding.bidCoalManageList()
  coalTypeList.value = res || []
}

const getCreateSessionBody = () => {
  const data = cloneDeep(formData.value)
  const { eventName } = getAnnouncement(data.announcementId)
  data['announcementName'] = eventName
  if (data.deliveryDate && data.deliveryTime.length === 2) {
    data['deliveryStartTime'] =
      new Date(
        `${formatDate(data.deliveryDate, 'YYYY-MM-DD')} ${formatDate(
          data.deliveryTime[0],
          'HH:mm:ss'
        )}`
      )?.getTime() || 0
    data['deliveryEndTime'] =
      new Date(
        `${formatDate(data.deliveryDate, 'YYYY-MM-DD')} ${formatDate(
          data.deliveryTime[1],
          'HH:mm:ss'
        )}`
      )?.getTime() || 0
  }
  if (data?.deliveryCycle?.length === 2) {
    data['deliveryCycleStart'] = new Date(data?.deliveryCycle[0])?.getTime() || 0
    data['deliveryCycleEnd'] = new Date(data?.deliveryCycle[1])?.getTime() || 0
  }
  if (data.publicityTime) {
    data['publicityTime'] = new Date(data.publicityTime)?.getTime() || 0
  }
  data.sectionMessageCreateReqVOList = handleSectionMessageCreateReqVOList(
    data.sectionMessageCreateReqVOList
  )
  data.appointClient = data.appointClient.join(',')
  delete data?.deliveryDate
  delete data?.deliveryTime
  delete data?.deliveryCycle
  return data
}

const getAnnouncement = (id) => {
  return eventNameList.value.find((e) => e.id === id)
}

const handleSectionMessageCreateReqVOList = (list) => {
  list.forEach((e) => {
    if (e.startTime) {
      e.startTime = new Date(e.startTime).getTime() || 0
    }
    if (e.endTime) {
      e.endTime = new Date(e.endTime).getTime() || 0
    }
    e.coalName = coalTypeList.value.find((m) => m.id === e.coalId)?.coalName
  })
  return list
}

const resetFn = () => {
  formData.value = {
    announcementId: undefined,
    announcementCode: undefined,
    sessionName: undefined,
    sessionCode: undefined,
    tradingGrossAmount: undefined,
    securityDeposit: undefined,
    deliveryCycle: [],
    deliveryPlace: undefined,
    deliveryDate: undefined,
    deliveryTime: [],
    countdown: 60,
    publicityTime: undefined,
    tradingWay: undefined,
    sectionMessageCreateReqVOList: [],
    remark: undefined,
    appointClient: []
  }
  formRef.value?.resetFields()
}

const getByEventName = async () => {
  eventNameList.value = await bidding.getByEventName()
}

const getCustomList = async () => {
  clientList.value = await bidding.getCustomList()
}

onMounted(() => {
  bidCoalManageList()
  getByEventName()
  getCustomList()
  addRow()
})
</script>
<style lang="scss" scoped>
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .title {
    font-weight: bold;
  }

  .flex-box-time {
    display: flex;
    align-items: center;
    width: 200px;
    white-space: nowrap;
  }
}

.spec-user {
  display: flex;
  align-items: center;
  > :first-child {
    margin-right: 20px;
  }
}

.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;

  * + * {
    margin-left: 12px;
  }
}

.back-box {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

:deep(.el-form-item.no-label > div.el-form-item__content) {
  margin-left: 0 !important;
}

:deep(form .el-row.base > div.el-form-item > label) {
  width: 150px !important;
}

:deep(.el-input__wrapper),
:deep(.el-input) {
  width: 100% !important;
}
</style>
